<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*设置浮动*/
		.ul1>li,.ul2>li,.div4,.div5,.img2,.p4{
			float: left;
		}
		/*清理浮动*/
		.ul1:after,.ul2:after,.div4:after,.div5:after,.img2:after,.p4:after{
			content: "";
			height: 0;
			display: block;
			clear: both;
		}
		/*设置大小*/
		.div1{
			width: 100%;
			height: 60px;
		}
		/*设置背景颜色*/
		.div1{
			background-color: black;
		}
		/*设置字体大小*/
		.ul1>li{
			font-size: 20px;
		}
		.span1{
			font-size: 20px;
			font-weight: bold;
		}
		/*设置字体颜色*/
			
		/*设置间距*/
		.ul1>li{
			padding-left: 40px;
			position: relative;
			top:20px;
		}
		.a3{
			color: black;
			padding-left: 40px;
			position: relative;
			top:10px;
			left:-40px;
		}
		/*ul2里面得开始和结束位置需要单独进行设置*/
		.a2{
			color: black;
			position: relative;
			left:-40px;
			top:10px;
		}
		.a4{
			color: black;
			position: relative;
			left:300px;
			top:10px;
		}

		.li5{
			position: relative;
			left:500px;
		}
		.img1{

			margin: 40px;
			padding-left: 30px;
		}
		.div2,.div3{
			position: relative;
			left:70px;
		}
		.div3{
			color: gray;
			position: relative;
			top:30px;
		}
		/*设置样式*/
		.ul1,.ul2{
			list-style: none;
		}
		.a1{
			text-decoration: none;
			color: white;
		}
		.a2,.a3,.a4{
			text-decoration: none;
		}
		/*设置边框*/
		.div2{
			width: 1150px;
			height: 70px;
			border-top:2px solid black;
			border-bottom:1px solid black;
		}
		.div3{
			width: 680px;
			border-bottom: 1px dashed black;
		}
		.div4{
			width: 680px;
			height: 200px;
			/*border: 1px dashed black;*/
			position: relative;
			top:30px;
			left:70px;
		}
		.div5{
			width: 450px;
			height: 200px;
			/*border: 1px dashed black;*/
			position: relative;
			top:30px;
			left:90px;
		}
		.span2{
			color: gray;
		}
		.span3{
			color: red;
		}
		.p3{
			position: relative;
			top:30px;
		}
		.div51{
			width: 450px;
			height: 40px;
			background-color: black;
			color: white;
			position: relative;
			top:-15px;
		}
		.p5{
			font-size: 20px;
			position: relative;
			top:10px;
			left:10px;
		}
		.p4,.p6{
			font-size: 22px;
			position: relative;
			left: 30px;
			
		}
	</style>
</head>
<body>

	<div class="div1">
		<ul class = "ul1">
			<li class = "li1"><a href="#" class = "a1">HOME</a></li>
			<li class = "li2"><a href="#" class = "a1">ABOUT</a></li>
			<li class="li3"><a href="#" class = "a1">CONTACT</a></li>
			<li class="li4"><a href="#" class = "a1">ADVERTISE</a></li>
			<li class="li5"><a href="#" class = "a1">SEARCH THE SITE...</a></li>
		</ul>
	</div>

	<img src="blog2/devlounge_logo.png" alt="无法加载图片" class = "img1">
	
	<div class = "div2">
		<ul class = "ul2">
			<li><a href="#" class ="a2">HOME</a></li>
			<li><a href="#" class ="a3">CODE</a></li>
			<li><a href="#" class ="a3">DESIGN</a></li>
			<li><a href="#" class ="a3">DESIGNFOCUS</a></li>
			<li><a href="#" class ="a3">INTERVIEWS</a></li>
			<li><a href="#" class ="a3">PUBLISHING</a></li>
			<li><a href="#" class ="a3">STRATEGT</a></li>
			<li><a href="#" class ="a3">WEBAPPS</a></li>
			<li><a href="#" class ="a4">EXTRAS</a></li>
		</ul>
	</div>

	<div class="div3">
		<p class="p1">You are here:<span class = "span1">Home</span>/<span class="span1">Code</span>Top 20 HTML5 and CSS3 sites to inspire you</p>
	</div>

	<!-- 弄两个悬浮块 -->
	<div class = "div4">
		<h2 class="h21">Top 20 HTML5 and CSS3 sites to inspire you</h2>
		<p class="p2"><span class="span2">June 3,2010 By </span>Hyde</p>
		<p class="p3"><span class="span2">The use of </span><span class="span3">HTML5</span>
			<span class="span2">in combination with </span><span class="span3">CSS3</span>
			<span class="span2">is really starting to take off.Safar Chrome and Mozilla are
			pushing more support with each new release making it possible to code really
			great websites</span>
		</p>
	</div>
	<div class="div5">
		<div class = "div51">
			<p class="p5">CODE & TUTORIALS</p>
		</div>
		<img src="blog2/comp.jpg" alt="" class = "img2">
		<p class = "p4">Which Front-End Development </p>
		<p class = "p6">  Languages Will Grow in 2017?</p>
	</div>
</body>
</html>